<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import type { TableInstance } from 'element-plus'
import http from '@/http'

interface User {
  id: number
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

const selectable = (row: User) => ![1, 2].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const checkItemName = ref()
const keywords = ref()
const status = ref()
const zhuangtai = ref()
function getselect() {
  http.get('/sci/selectAll', {
    params: {
      checkItemName: checkItemName.value,
      keywords: keywords.value,
      status: status.value
    }
  }).then((res) => {
    tableData.value = res
    zhuangtai.value = res.status
    checkItemName.value = '',
      keywords.value = ''

  })
}
onMounted(() => {
  getselect();
})
const tableData = ref();
// 修改
import { onMounted, reactive, ref } from 'vue'
import Cookies from 'universal-cookie'
import { useUserStore } from '@/stores/user'
import { tr } from 'element-plus/es/locale'

const dialogFormVisible = ref(false)
const formLabelWidth = '200px'
const tianjia = ref(false)
const form = reactive({
  checkItemName: '',
  keywords: '',
  unitPrice: '',
  cost: '',
  status: '',
  updateTime: '',
  updateBy: '',
  checkItemId: '',
  createTime: '',
  unit: '',
  typeId: '',
  createBy: ''
})
const i = 0
//修改方法
const update = (index: number, row) => {
  //控制修改模态框的显示
  form.checkItemName = row.checkItemName
  form.cost = row.cost
  form.keywords = row.keywords
  form.unitPrice = row.unitPrice
  form.status = row.status
  form.checkItemId = row.checkItemId
  // 时间
  const now = new Date();

  const year = now.getFullYear();
  const month = ('0' + (now.getMonth() + 1)).slice(-2);
  const day = ('0' + now.getDate()).slice(-2);
  const hours = ('0' + now.getHours()).slice(-2);
  const minutes = ('0' + now.getMinutes()).slice(-2);
  const seconds = ('0' + now.getSeconds()).slice(-2);

  const formattedTime = year + '-' + month + '-' + day + '-' + hours + '-' + minutes + '-' + seconds;
  form.updateTime = formattedTime;
  const userStore = useUserStore()
  const user = userStore.getUser.value
  form.updateBy = user.userName
  dialogFormVisible.value = true
}
function up() {
  //发送修改请求
  http.post('/sci/update', form)
    .then((i) => {
      i = i
    })
  dialogFormVisible.value = false
  window.location.reload();
}
function tian() {
  const now = new Date();

  const year = now.getFullYear();
  const month = ('0' + (now.getMonth() + 1)).slice(-2);
  const day = ('0' + now.getDate()).slice(-2);
  const hours = ('0' + now.getHours()).slice(-2);
  const minutes = ('0' + now.getMinutes()).slice(-2);
  const seconds = ('0' + now.getSeconds()).slice(-2);
  const formattedTime = year + '-' + month + '-' + day + '-' + hours + '-' + minutes + '-' + seconds;
  form.createTime = formattedTime;
  const userStore = useUserStore()
  const user = userStore.getUser.value
  form.createBy = user.userName
  console.log("sssssssss:"+user.userName)
  http.post('/sci/insert',form)
  .then((i)=>{
    i=i
  })

  tianjia.value=false
  window.location.reload();
}
</script>
<template>
  <div>
    <ul>
      <li>项目名称&nbsp;&nbsp;<input type="text" style="width: 200px;" v-model="checkItemName" /></li>
      <li>关键字&nbsp;&nbsp;<input type="text" style="width: 200px;" v-model="keywords" /></li>
      <li>项目类型&nbsp;&nbsp;<select style="width: 100px; text-align: center;" v-model="status">
          <option value="0">正常</option>
          <option value="1">停用</option>
        </select></li>
      <li><el-button type="primary" :icon="Search" style="height: 25px;" @click="getselect">搜索</el-button></li>
      <li><input type="reset"
          style="background-color: #409eff; width: 80px; height: 25px; color: aliceblue; border: 0px; border-radius: 10%;">
      </li>
    </ul>
  </div>
  <div class="mb-4" style="margin-top: 70px; margin-left: 60px;">
    <el-button type="primary" style="width: 200px;" @click="tianjia = true">+添加</el-button>
  </div>

  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column property="checkItemId" label="项目费用id" width="120" />
    <el-table-column property="checkItemName" label="项目名称" />
    <el-table-column property="keywords" label="关键字" />
    <el-table-column property="unitPrice" label="项目单价" />
    <el-table-column property="cost" label="项目成本" />
    <el-table-column property="unit" label="单位" />
    <el-table-column property="typeId" label="类别" />
    <el-table-column label="状态">
      <template #default="scope">
        <span v-if="scope.row.status == 0">正常</span>
        <span v-else-if="scope.row.status == 1">禁用</span>
      </template>
    </el-table-column>
    <el-table-column property="createTime" label="创建时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="update(scope.$index, scope.row)">
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 修改框 -->
  <el-dialog v-model="dialogFormVisible" title="修改" width="800">
    <el-form :model="form">
      <el-form-item label="项目名称" :label-width="formLabelWidth">
        <el-input v-model="form.checkItemName" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="关键字" :label-width="formLabelWidth">
        <el-input v-model="form.keywords" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="项目单价" :label-width="formLabelWidth">
        <el-input v-model="form.unitPrice" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="项目成本" :label-width="formLabelWidth">
        <el-input v-model="form.cost" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="项目状态" :label-width="formLabelWidth">
        <select v-model="form.status" style="width: 200px;height: 30px;">
          <option value="0">正常</option>
          <option value="1">停用</option>
        </select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click=up()>修改</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加框 -->

  <el-dialog v-model="tianjia" title="添加" width="800">
    <el-form :model="form">
      <el-form-item label="项目名称" :label-width="formLabelWidth">
        <el-input v-model="form.checkItemName" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="关键字" :label-width="formLabelWidth">
        <el-input v-model="form.keywords" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="项目单价" :label-width="formLabelWidth">
        <el-input v-model="form.unitPrice" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="项目成本" :label-width="formLabelWidth">
        <el-input v-model="form.cost" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="项目单位" :label-width="formLabelWidth">
        <el-input v-model="form.unit" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="项目类别" :label-width="formLabelWidth">
        <el-input v-model="form.typeId" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="项目状态" :label-width="formLabelWidth">
        <select v-model="form.status" style="width: 200px;height: 30px;">
          <option value="0">正常</option>
          <option value="1">停用</option>
        </select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click=tian()>添加</el-button>
        <el-button type="primary" @click="tianjia = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
ul li {
  list-style: none;
  float: left;
  margin-left: 40px;
}
</style>
